<template>
  <div class="chapter-list-page">
    <button class="back-btn" @click="goBack">← 返回</button>
    <h2>{{ bookTitle }} - 全部章节</h2>
    <ul>
      <li
        v-for="(chapter, index) in chapters"
        :key="index"
        @click="goToChapter(chapter.chapterId)"
      >
        {{ chapter.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBookDetail } from '@/apis/book'

const route = useRoute()
const router = useRouter() // 获取路由实例
const bookId = route.params.bookId
const bookTitle = ref('')
const chapters = ref([])

// 获取书籍详细信息并设置章节列表
onMounted(async () => {
  try {
    const response = await getBookDetail(bookId)
    const bookData = response.data
    bookTitle.value = bookData.title
    chapters.value = bookData.chapters || []
  } catch (error) {
    console.error('Failed to fetch book details:', error)
  }
})

// 跳转到指定章节的函数
const goToChapter = (chapterId) => {
  router.push(`/book/${bookId}/chapter/${chapterId}`) // 使用router.push跳转到章节详情页面
}

const goBack = () => {
  router.go(-1) // 返回上一页
}
</script>

<style scoped>
.chapter-list-page {
  padding: 20px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  font-size: 16px;
  margin: 10px 0;
  cursor: pointer; /* 设置为可点击的手型 */
}

li:hover {
  color: #007bff; /* 鼠标悬停时改变颜色 */
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

.back-btn {
  background: none;
  border: none;
  color: #007bff;
  font-size: 16px;
  cursor: pointer;
}
</style>
